import React, { useEffect, useState } from 'react';
import {
    Button,
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    TreeSelect,
} from 'antd';


const Myform = (props) => {
    const [form] = Form.useForm();
    useEffect(() => {
        if (props.title == '编辑') {
            form.setFieldsValue(props.objitem)
        }
    }, [])
    const onFinish = (values: any) => {
        let tags = []
        if (values.tags == 1) {
            tags = ['前端工程师', 'DEVELOPER']
        } else {
            tags = ['CEO', '全栈工程师']
        }
        if (props.title == '添加') {
            let obj = {
                ...values,
                tags
            }
            props.handleOk(obj, '添加')//关闭弹窗
        } else {
            let obj = {
                ...props.objitem,
                ...values,
                tags
            }
            props.handleOk(obj, '编辑')//关闭弹窗
        }
    };
    return (
        <Form
            onFinish={onFinish}
            form={form}
            style={{ maxWidth: 600 }}
        >
            <Form.Item label="用户名" name="name" rules={[
                {
                    required: true,
                    message: '请输入用户名!'
                }
            ]}>
                <Input />
            </Form.Item>
            <Form.Item label="角色" name="role" rules={[
                {
                    required: true,
                    message: '请输入角色1或2!'
                },
            ]}>
                <Select>
                    <Select.Option value="1">1</Select.Option>
                    <Select.Option value="2">2</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item label="简介" name="desc" rules={[
                {
                    required: true,
                    message: '请输入简介!'
                }
            ]}>
                <Input />
            </Form.Item>
            <Form.Item label="标签" name="tags" rules={[
                {
                    required: true,
                    message: '请选择标签!'
                }
            ]}>
                <Select
                    defaultValue="lucy"
                    options={[
                        { value: 1, label: '前端工程师' },
                        { value: 2, label: '全栈工程师' },
                    ]}
                />
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="submit">确定</Button>
            </Form.Item>
        </Form>
    );
};

export default Myform;